import {
  randomNum
} from "../shared/utils";

import {
  checkType
} from '../shared/utils';

//匹配内容：onClick="xxx"
const reg_onClick = /onClick\=\"(.*?)\"/g;

//匹配内容：'add(2)'
//匹配规则：^() 以任意字符开头截取到括号(结尾的中间全部内容
const reg_fnName = /^(.*?)\(/;

//匹配内容：'add(2)'
const reg_arg = /\((.*?)\)/;

const eventPool = [];

/**
 * 希望池子里(eventPool数组)保存的对象里有标识记录着该节点和该节点的事件处理函数
 * {
 *   flag: '随机字符串',
 *   handler: 事件处理函数的字符串,
 *   type: click
 * }
 */

/**
 * 视图模板里的原事件绑定句柄改为标识属性记录
 * @param {*} template 原模板
 * @returns 替换后的模板
 */
export function eventFormat(template) {
  //onClick="xxx"
  template = template.replace(reg_onClick, function (node, key) {
    // console.log(node);
    //onClick="add(2)"
    //onClick="minu(1)"

    // console.log(key);
    //add(2)
    //minu(1)

    const _flag = randomNum();

    eventPool.push({
      flag: _flag,
      handler: key.trim(),
      type: 'click'
    });

    /**
     * console.log(eventPool);
     * [
     *   {flag: 1640242607185, handler: 'add(2)', type: 'click'},
     *   {flag: 1640242606686, handler: 'minu(1)', type: 'click'}
     * ]
     */

    //替换onClick="add(2)"为一个标识记录
    return `data-dom=${_flag}`;
  });

  /**
   * console.log(template);
   * <h1>{{count}}</h1>
   * <button data-dom=1640242536045>+</button>
   * <button data-dom=1640242535847>-</button>
   */
  return template;
}

/**
 * 绑定事件处理函数
 * @param {*} methods 一个保存着事件处理方法集合的对象
 */
export function bindEvent(methods) {
  // console.log(methods);
  //{add: ƒ, minus: ƒ}

  //获取所有标签
  const allElements = document.getElementsByTagName('*');
  // console.log(allElements);
  //HTMLCollection(13) [html, head, script, meta, meta, meta, title, body, div#app, h1, button, button, script, viewport: meta, app: div#app]

  let oItem = null;
  let _flag = 0;

  //遍历eventPool数组拿到每一个含有标识的事件处理函数对象
  eventPool.forEach((event) => {
    // console.log(event);
    //{flag: 1640243846404, handler: 'add(2)', type: 'click'}
    //{flag: 1640243844099, handler: 'minu(1)', type: 'click'}

    //找到flag标识对应的节点
    for (let i = 0; i < allElements.length; i++) {
      oItem = allElements[i];
      // console.log(oItem);

      //拿到对应项的flag属性的属性值
      _flag = parseInt(oItem.dataset.dom);
      // console.log(oItem.getAttribute('data-dom'));
      // console.log(_flag);
      // 1640244352687/1640244360610

      // console.log(typeof _flag); string
      // console.log(typeof parseInt(_flag)); number

      //如果eventPool池保存的对象里flag跟符合节点的_flag一致时
      if (event.flag === _flag) {
        //绑定事件处理函数
        oItem.addEventListener(event.type, function () {
          // methods['add'](2)

          //console.log(event.handler);
          //'add(2)'

          //拿到字符串'add(2)'里面的add字符即函数名称
          // console.log(event.handler.match(reg_fnName));
          //['add(', 'add', index: 0, input: 'add(2)', groups: undefined]

          const fnName = event.handler.match(reg_fnName)[1];
          // console.log(fnName);
          //'add' / 'minus'

          //拿到该函数的参数
          // console.log(event.handler.match(reg_arg));
          //['(2)', '2', index: 3, input: 'add(2)', groups: undefined]
          let arg = event.handler.match(reg_arg)[1];
          // console.log(arg);
          //'2' / '1'
          // console.log(typeof arg); string

          // console.log(methods.add);
          //(num) => { state.count += num; }

          //处理arg参数 如果传入的是字符串也将其转为数值
          arg = checkType(arg);

          //执行函数
          methods[fnName](arg);
        }, false);
      }

    }
  })
}